@media all and (-webkit-min-device-pixel-ratio: 2) {
	#list-button,#list-button .list-button{
	    /*transition*/
	    -webkit-transition: 0.3s ease-in-out;
	    -moz-transition: 0.3s ease-in-out;
	    -ms-transition: 0.3s ease-in-out;
	    -o-transition: 0.3s ease-in-out;
	    transition: 0.3s ease-in-out;

		transform:translateZ(0px);
		-moz-transform:translateZ(0px);
		-webkit-transform:translateZ(0px);
		-o-transform:translateZ(0px); 
	}
	#jSouperApp #main {
		#list-button {
			position: fixed!important;
			top: 60px;
			left: 0;
			background-color: $themeColor;
			width: 2rem!important;
			height: 2rem!important;
			min-height: auto!important;
			overflow: hidden!important;
			border-radius: 0.25rem!important;
			opacity: 0.5;
			.list-button{
				display:none!important;
			}
		}
		#list-button:before{
			content: "\2261";
			display: block;
			text-align: center;
			font-size: 2rem;
			line-height: 2rem;
			height: 2rem;
		}
		#list-button:hover:before,#list-button.hover:before{
			content:"\5bfc \822a";
			font-size: 1.5rem;
			// height: 0;
		}
		#list-button:hover,#list-button.hover{
			width: 6rem!important;
			height: auto!important;
			opacity: 1;
			z-index: 10;
			.list-button{
				display:block!important;
				width: 100%!important;
				height: 2rem!important;
				line-height: 2rem!important;
				margin: 0!important;
				border: 1px solid #666;
				border-width: 0 1px 1px 0!important;
			}
		}
	}
}